<template>
  <!-- 初审  begin -->
  <div class="chuShen_box">
    <div class="chuShen_box_list">
      <!-- 普通用户列表 -->
      <div class="chuShen_box_list_ordinary">
        <div style="margin: 10px 0;">
          <div class="items">
            <div class="label">{{$t('m.cName')}}</div>
            <Input
              type="text"
              class="ivu-input-w200"
              v-model="search.fullName"
              :placeholder="$t('m.cName')"
            />
          </div>
          <div class="items">
            <div class="label">{{$t('m.phone')}}</div>
            <Input
              type="text"
              class="ivu-input-w200"
              :placeholder="$t('m.phone')"
              v-model="search.phone"
            />
          </div>
          <div class="search_content">
            <div class="search_btn_box">
              <Button class="search_btn" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
              <Button class="search_btn" @click="handleFilterReset" type="primary">{{$t('m.cháxún')}}</Button>
            </div>
            <Button v-show="!userAdmin" @click="jieDan" type="success">
              {{$t('m.orderTaking')}}
            </Button>
          </div>
        </div>

        <Table
          border
          :loading="chuShenListDataLoading"
          ref="selection"
          :columns="chuShenList"
          :data="chuShenListData"
        ></Table>

        <div style="margin-top: 5px; text-align: right;">
          <Page
            :total="chuShenPageSize"
            :current.sync="search.pageNumber"
            :page-size-opts="[10, 20, 40, 80, 100, 200, 400, 600, 800, 1000]"
            show-total
            show-elevator
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="handleSizeChange"
            style="margin: 15px 0;"
          ></Page>
        </div>
      </div>
    </div>
  </div>
  <!-- 审核中心 end -->
</template>

<script>
export default {
  props: {
    tabsVal: '',
  },
  data() {
    return {
      userAdmin: false,
      search: {
        fullName: "",
        phone: "",
        pageNumber: 1,
        pageSize: 10,
      },
      orderGid: "",
      chuShenListData: [],
      chuShenPageSize: 1,
      chuShenListDataLoading: true,
      chuShenList: [
        {
          title: this.$t("m.applyTime"),
          key: "ctime",
          fixed: 'left',
          width: 200,
          align: "center"
        },
        {
          title: this.$t('m.clientChanne'),
          key: "platformName",
          width: 200,
          align: "center"
        },
        {
          title: this.$t("m.userNumber"),
          key: "userId",
          align: "center",
          width: 200
        },
        {
          title: this.$t("m.userName"),
          key: "fullName",
          width: 200,
          align: "center",
        },
        {
          title: this.$t("m.phone"),
          key: "phone",
          width: 200,
          align: "center",
          className: "cleanTitle",
          render: (h, params) => {
          return h("div", {
            domProps: {
              innerHTML: `<span>` + params.row.phone + `</span>` //渲染html内容
            }
          });

          }
        },
        {
          title: this.$t("m.userType"),
          key: "isFirst",
          width: 200,
          align: "center",
          render: (h, param) => {
            const {
              row: { isFirst }
            } = param;

            return h(
              "div",
              isFirst === 1 ? this.$t("m.shǒucìjièkuǎn") : this.$t("m.Ngàymai")
            );
          }
        },
        {
          title: this.$t("m.yònghùděngjí"),
          key: "levelName",
          width: 200,
          align: "center",
        },
        {
          title: this.$t("m.loanMount"),
          key: "loanAmount",
          align: "center",
          width: 200,
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.loanAmount));
          }
        },
        {
          title: this.$t("m.loanTimeLimit"),
          key: "loanDays",
          align: "center",
          width: 200
        },
        {
          title: this.$t("m.ApprovalStatus"),
          key: "status",
          align: "center",
          width: 200,
          render: (h, param) => {
            const {
              row: { status }
            } = param;
            if (
              status &&
              status !== "none" &&
              status !== "null"
            ) {
              const str = "m." + status;
              return h("div", this.$t(str));
            }
            return h("div", "");
          }
        },
        {
          title: this.$t('m.Finalreviewer'),
          key: "checkerFinal",
          align: "center",
          width: 200
        },
        {
          title: this.$t("m.operate"),
          align: "center",
          fixed: 'right',
          width: 120,
          render: (h, param) => {
            return h('Button', {
              props: {
                type: "success",
                size: "small",
                long: true
              },
              on: {
                click: () => {
                  this.handleBankInfo(param.row);
                }
              },
            }, this.$t("m.userDetails"));
          },
        },
      ],
    };
  },
  methods: {
    jieDan() {
      this.$http.post('/api/laocai/check/final/pop').then((res) => {
        if (res.body.code == 0) {
          this.chuShenQuery()
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      })
    },
    handleBankInfo(row) {
      this.$emit('getBankInfo', {
        userId: row.userId,
        orderGid: row.orderGid,
      });
    },
    emptyQueryInfo() {
      this.search = Object.assign(
        {},
        {
          fullName: '',
          phone: "",
          pageNumber: 1,
        }
      );
    },
    // 筛选条件
    handleFilterReset() {
      this.$set(this.search, "pageNumber", 1);
      this.chuShenQuery();
    },
    pageChange(e) {
      this.$set(this.search, 'pageNumber', e);
      this.chuShenQuery()
    },
    // 每页显示数量
    handleSizeChange(val) {
      this.$set(this.search, 'pageSize', val);
      this.chuShenQuery()
    },

    // 请求数据
    chuShenQuery(pageNbm = 1) {
      this.chuShenListDataLoading = false;
      const param = {
        ...this.search,
        status: 'checking_final',
      };
      let query = "";
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? "" : "&"}${item}=${param[item]}`;
        }
      });
      var url = `/api/laocai/check/order-assign-list?${query}`;
      this.$http.get(url).then(res => {
        if (res.data.code == 0) {
          let adminDataList = res.data.result.list;
          this.chuShenPageSize = res.data.result.size;
          this.chuShenListData = adminDataList;
        } else {
          this.chuShenPageSize = 0;
          this.chuShenListData = [];
        }
        if (!this.chuShenPageSize) {
          this.$Message.warning(this.$t("m.zhànshíméiyǒushùjù"));
          return;
        } else {
          this.$Message.success(this.$t("m.errorCode" + res.body.code));
        }
      });
    },
  },
  watch: {
    tabsVal(val) {
      if (val === 'name1') {
        if (sessionStorage.getItem('roles') == 'admin') {
          this.userAdmin = true;
        }
        this.chuShenQuery();
      }
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../../static/style.css";
@import "../../../static/common.scss";

.items {
  display: inline-flex;
  width: 200px;
  flex-direction: column;
  margin-bottom: 10px;
  margin-right: 20px;
  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: left;
    color: #222;
    font-size: 14px;
  }
}

.search_content {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 20px 0;
  .search_btn_box {
    .search_btn {
      margin-right: 10px;
      width: 100px;
    }
  }
}

.remark_inprt {
  margin-left: 50px;
  width: 25%;
}
.btn-wrapper {
  margin-top: 12px;
  text-align: right;
}

.btn-wrapper a:hover,
.btn-wrapper a:active,
.btn-wrapper a:visited {
  color: #ffffff;
}

.zhuanzhuan {
  margin-bottom: 2px;
  position: relative;
}

.twoLoans {
  color: #fff;
  background: rgb(226, 61, 103);
  padding: 0px 5px;
  display: inline-block;
  border: rgb(226, 61, 103);
  margin-left: 5px;
  /* height: 20px; */
  font-size: 12px;
  /* transform: scale(0.7); */
}

.chuShen_box_title {
  color: #515a6e;
  margin: 0 15px;
  font-size: 16px;
  font-weight: bold;
  line-height: 75px;
}

.chuShen_box_list {
  margin: 15px;
}

.admin_head {
  height: 60px;
}

.admin_head_select {
  float: left;
}

.admin_head_select_button {
  float: right;
  width: 100px;
}

.admin_head_select_button_no {
  float: right;
  /* width: 100px; */
  opacity: 0.5;
}

.admin_page {
  float: right;
}

.details_head {
  overflow: hidden;
}

.details_head_title {
  height: 40px;
  font-size: 18px;
  font-weight: 700;
}

.ivu-modal-footer {
  border: 0px;
}

.ivu-modal-body {
  height: auto;
  overflow: hidden;
}

.passButton .btn-success {
  /* margin-left: 80px; */
  margin-left: 13%;
}

.passButton button {
  width: 15%;
  display: inline-block;
  margin-top: 0px !important;
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
